<!-- page content -->
<div id="dashboardDiv" class="right_col" role="main">
    <!-- top tiles -->
    <div class="row" style="display: inline-block;" >
        <div class="tile_count">
            <div class="col-md-2 col-sm-4  tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Users</span>
                <div class="count">2500</div>
                <span class="count_bottom"><i class="green">4% </i> From last Week</span>
            </div>
            <div class="col-md-2 col-sm-4  tile_stats_count">
                <span class="count_top"><i class="fa fa-clock-o"></i> Average Time</span>
                <div class="count">123.50</div>
                <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
            </div>
            <div class="col-md-2 col-sm-4  tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Males</span>
                <div class="count green">2,500</div>
                <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
            </div>
            <div class="col-md-2 col-sm-4  tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Females</span>
                <div class="count">4,567</div>
                <span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
            </div>
            <div class="col-md-2 col-sm-4  tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Collections</span>
                <div class="count">2,315</div>
                <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
            </div>
            <div class="col-md-2 col-sm-4  tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Connections</span>
                <div class="count">7,325</div>
                <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
            </div>
        </div>
    </div>
    <!-- /top tiles -->

    <!-- 柱状图 -->
    <div id="histogram" class="col-md-4 col-sm-4 ">
        <div class="x_panel tile fixed_height_320">
            <div class="x_title">
                <h2>试题数量</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Settings 1</a>
                            <a class="dropdown-item" href="#">Settings 2</a>
                        </div>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <h4>题库题型数量</h4>
                <div class="widget_summary">
                    <div class="w_left w_25">
                        <span>单项选择</span>
                    </div>
                    <div class="w_center w_55">
                        <div class="progress">
                            <div id="singleChoiceProgress" class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">60% Complete</span>
                            </div>
                        </div>
                    </div>
                    <div class="w_right w_20">
                        <span id = "singleChoice" value=""></span>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <div class="widget_summary">
                    <div class="w_left w_25">
                        <span>多项选择</span>
                    </div>
                    <div class="w_center w_55">
                        <div class="progress">
                            <div id="multipleChoiceProgress" class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">60% Complete</span>
                            </div>
                        </div>
                    </div>
                    <div class="w_right w_20">
                        <span id="multipleChoice" value=""></span>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="widget_summary">
                    <div class="w_left w_25">
                        <span>填空</span>
                    </div>
                    <div class="w_center w_55">
                        <div class="progress">
                            <div id="fillBlankProgress" class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">60% Complete</span>
                            </div>
                        </div>
                    </div>
                    <div class="w_right w_20">
                        <span id="fillBlank" value=""></span>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="widget_summary">
                    <div class="w_left w_25">
                        <span>判断</span>
                    </div>
                    <div class="w_center w_55">
                        <div class="progress">
                            <div id="judgeProgress" class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">60% Complete</span>
                            </div>
                        </div>
                    </div>
                    <div class="w_right w_20">
                        <span id="judge" value=""></span>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="widget_summary">
                    <div class="w_left w_25">
                        <span>简答</span>
                    </div>
                    <div class="w_center w_55">
                        <div class="progress">
                            <div id="shortAnswerProgress" class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">60% Complete</span>
                            </div>
                        </div>
                    </div>
                    <div class="w_right w_20">
                        <span id="shortAnswer" value=""></span>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="widget_summary">
                    <div class="w_left w_25">
                        <span>编程</span>
                    </div>
                    <div class="w_center w_55">
                        <div class="progress">
                            <div id="programmingProgress" class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">60% Complete</span>
                            </div>
                        </div>
                    </div>
                    <div class="w_right w_20">
                        <span id="programming" value=""></span>
                    </div>
                    <div class="clearfix"></div>
                </div>

            </div>
        </div>
    </div>

    <div id="pieChart" class="col-md-4 col-sm-4 ">
        <div class="x_panel tile fixed_height_320 overflow_hidden">
            <div class="x_title">
                <h2>试题比例</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Settings 1</a>
                            <a class="dropdown-item" href="#">Settings 2</a>
                        </div>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <table class="" style="width:100%">
                    <tr>
                        <th style="width:37%;">
                            <p>题型</p>
                        </th>
                        <th>
                            <div class="col-lg-7 col-md-7 col-sm-7 ">
                                <p class="">试题颜色</p>
                            </div>
                            <div class="col-lg-5 col-md-5 col-sm-5 ">
                                <p class="">比例</p>
                            </div>
                        </th>
                    </tr>
                    <tr>
                        <td>
                            <canvas class="canvasDoughnut" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>
                        </td>
                        <td>
                            <table class="tile_info">
                                <tr>
                                    <td>
                                        <p><i class="fa fa-square blue"></i><span>单选</span> </p>
                                    </td>
                                    <td id="singleChoiceProportion" value=""></td>
                                </tr>
                                <tr>
                                    <td>
                                        <p><i class="fa fa-square green"></i><span>多选</span> </p>
                                    </td>
                                    <td id="multipleChoiceProportion" value=""></td>
                                </tr>
                                <tr>
                                    <td>
                                        <p><i class="fa fa-square purple"></i><span>填空</span> </p>
                                    </td>
                                    <td id="fillBlankProportion" value=""></td>
                                </tr>
                                <tr>
                                    <td>
                                        <p><i class="fa fa-square aero"></i><span>判断</span> </p>
                                    </td>
                                    <td id="judgeProportion" value=""></td>
                                </tr>
                                <tr>
                                    <td>
                                        <p><i class="fa fa-square red"></i><span>简答</span> </p>
                                    </td>
                                    <td id="shortAnswerProportion" value=""></td>
                                </tr>
                                <tr>
                                    <td>
                                        <p><i class="fa fa-square yellow"></i><span>编程</span> </p>
                                    </td>
                                    <td id="programmingProportion" value=""></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    var questionNum = new  Vue({
        el:"#dashboardDiv",
        data:{
            questionNum:{
                type: "",
                typeNum: 0,
            }
        },
        methods:{
            //初始化柱状图数据
            initBarChart: function(){
                var self = this;
                //单项选择数量
                var singleChoiceNum = 0;
                //多项选择数量
                var multipleChoiceNum = 0;
                //填空
                var fillBlankNum = 0;
                //判断
                var judgeNum = 0;
                //简答
                var shortAnswerNum = 0;
                //编程
                var programmingNum = 0;
                $.ajax({
                    url: "/api/questionList",
                    type: "get",
                    success: function (rs) {
                        self.questionNum = rs;
                        // console.log(self.questionNum);
                        self.questionNum.forEach(function (e) {
                            let msg = {type : e.type ,typeNum : e.typeNum };
                            questionNum = msg;
                            //单项选择
                            if(questionNum.type == "singleChoice"){
                                singleChoiceNum = questionNum.typeNum;
                                $("#singleChoice").html(questionNum.typeNum + "道");
                            }
                            //多项选择
                            if(questionNum.type == "multipleChoice"){
                                multipleChoiceNum = questionNum.typeNum;
                                $("#multipleChoice").text(questionNum.typeNum + "道");
                            }
                            //填空
                            if(questionNum.type == "fillBlank"){
                                fillBlankNum = questionNum.typeNum;
                                $("#fillBlank").text(questionNum.typeNum + "道");
                            }
                            //简答
                            if(questionNum.type == "shortAnswer"){
                                shortAnswerNum = questionNum.typeNum;
                                $("#shortAnswer").text(questionNum.typeNum + "道");
                            }
                            //判断
                            if(questionNum.type == "judge"){
                                judgeNum = questionNum.typeNum;
                                $("#judge").text(questionNum.typeNum + "道");
                            }
                            //编程
                            if(questionNum.type == "programming"){
                                programmingNum = questionNum.typeNum;
                                $("#programming").text(questionNum.typeNum + "道");
                            }
                        });
                        //题目总数量
                        var totalNum = singleChoiceNum + multipleChoiceNum + fillBlankNum + judgeNum + shortAnswerNum + programmingNum;
                        //单选所占比例
                        var singleChoiceProportion = ((singleChoiceNum / totalNum) *100).toFixed(2) ;
                        $("#singleChoiceProgress").css("width", singleChoiceProportion +"%");
                        //多选所占比例
                        var multipleChoiceProportion = ((multipleChoiceNum / totalNum) *100).toFixed(2) ;
                        $("#multipleChoiceProgress").css("width", multipleChoiceProportion +"%");
                        //填空所占比例
                        var fillBlankProportion = ((fillBlankNum / totalNum) *100).toFixed(2) ;
                        $("#fillBlankProgress").css("width", fillBlankProportion + "%");
                        //判断所占比例
                        var judgeProportion = ((judgeNum / totalNum) *100).toFixed(2) ;
                        $("#judgeProgress").css("width", judgeProportion + "%");
                        //简答所占比例
                        var shortAnswerProportion = ((shortAnswerNum / totalNum) *100).toFixed(2) ;
                        $("#shortAnswerProgress").css("width", shortAnswerProportion + "%");
                        //编程所占比例
                        var programmingProportion = ((programmingNum / totalNum) *100).toFixed(2) ;
                        $("#programmingProgress").css("width", programmingProportion + "%");
                    },
                });
            },
            //初始化饼状图数据
            initPieChart : function(){
                var self = this;
                //单项选择数量
                var singleChoiceNum = 0;
                //多项选择数量
                var multipleChoiceNum = 0;
                //填空
                var fillBlankNum = 0;
                //判断
                var judgeNum = 0;
                //简答
                var shortAnswerNum = 0;
                //编程
                var programmingNum = 0;
                $.ajax({
                    url: "/api/questionList",
                    type: "get",
                    success: function (rs) {
                        self.questionNum = rs;
                        self.questionNum.forEach(function (e) {
                            let msg = {type : e.type ,typeNum : e.typeNum };
                            questionNum = msg;
                            //单项选择
                            if(questionNum.type == "singleChoice"){
                                singleChoiceNum = questionNum.typeNum;
                            }
                            //多项选择
                            if(questionNum.type == "multipleChoice"){
                                multipleChoiceNum = questionNum.typeNum;
                            }
                            //填空
                            if(questionNum.type == "fillBlank"){
                                fillBlankNum = questionNum.typeNum;
                            }
                            //简答
                            if(questionNum.type == "shortAnswer"){
                                shortAnswerNum = questionNum.typeNum;
                            }
                            //判断
                            if(questionNum.type == "judge"){
                                judgeNum = questionNum.typeNum;
                            }
                            //编程
                            if(questionNum.type == "programming"){
                                programmingNum = questionNum.typeNum;
                            }
                        });
                        //题目总数量
                        var totalNum = singleChoiceNum + multipleChoiceNum + fillBlankNum + judgeNum + shortAnswerNum + programmingNum;
                        //单选所占比例
                        var singleChoiceProportion = ((singleChoiceNum / totalNum) *100).toFixed(2) ;
                        $("#singleChoiceProportion").text(singleChoiceProportion + "%");
                        //多选所占比例
                        var multipleChoiceProportion = ((multipleChoiceNum / totalNum) *100).toFixed(2) ;
                        $("#multipleChoiceProportion").text(multipleChoiceProportion + "%");
                        //填空所占比例
                        var fillBlankProportion = ((fillBlankNum / totalNum) *100).toFixed(2) ;
                        $("#fillBlankProportion").text(fillBlankProportion + "%");
                        //判断所占比例
                        var judgeProportion = ((judgeNum / totalNum) *100).toFixed(2) ;
                        $("#judgeProportion").text(judgeProportion + "%");
                        //简答所占比例
                        var shortAnswerProportion = ((shortAnswerNum / totalNum) *100).toFixed(2) ;
                        $("#shortAnswerProportion").text(shortAnswerProportion + "%");
                        //编程所占比例
                        var programmingProportion = ((programmingNum / totalNum) *100).toFixed(2) ;
                        $("#programmingProportion").text(programmingProportion + "%");
                    },
                });
            },
        },
        //页面加载时调用函数
        mounted: function(){
            this.initBarChart();
            this.initPieChart();
        },
    });
</script>